<template>
	<view class="Poem">
		<view class="PoemName">{{MusicInfo.poemName}}</view>
		<view class="poemAuther">{{MusicInfo.poemcaodai}} - {{MusicInfo.poemAuther}}</view>
		<view class="poemImg" >
			<view class="poemBox" @click="handleMusicImg">
				<view  class="Box1" v-if="flag">
					<img class="Img" 
						src="https://tse3-mm.cn.bing.net/th/id/OIP-C.TdLcObDCNqEsPD4tFoEGbQHaHa?w=200&h=199&c=7&r=0&o=5&dpr=1.7&pid=1.7"
						alt="" />
				</view> 
				<view class="Box2" v-if="!flag">
					歌词
				</view>
			</view>
		</view>
	</view>
	<view class="slider">
		<slider value="1" min="0" max="200" activeColor="#dcc482" backgroundColor="#ccc" block-color="#dcc482"
			block-size="8" />
		<view class="sSpan">
			<span>0:00</span>
			<span>3:24</span>
		</view>
	</view>
	<view class="footer">
		<img class="footImg" src="../../static/play.png" alt=""/>
		<img class="footImg" src="../../static/last.png" alt=""/>
		<img class="footImg" src="../../static/bofang.png" alt=""/>
		<img class="footImg" src="../../static/xiayiqu.png" alt=""/>
		<img class="footImg" src="../../static/list.png" alt=""/>
	</view>
</template>

<script lang="ts">
	import { defineComponent, ref } from 'vue'
	import { onLoad } from "@dcloudio/uni-app"
	// import {httpPoemData} from '../../API/poemApi'
	export default defineComponent({
		setup() {
			const MusicInfo : any = ref({})
			const flag = ref(true)
			MusicInfo.value = {
				poemName: '悯农',
				poemcaodai: '唐初',
				poemAuther: '李白',
				// poemBody:[]
			}
			// 点击图片切换歌词
			const handleMusicImg = (()=>{
					flag.value = !flag.value
			})
			onLoad((options) => {
				console.log(options);
			})
			return {
				flag,
				MusicInfo,
				handleMusicImg
			}
		}

	})
</script>

<style lang="less">
	.Poem {
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;

		view {
			margin-top: 20rpx;
		}

		.PoemName {
			width: 200rpx;
			margin-left: 50%;
			transform: translate(-50%);
			font-size: 1.2em;
			font-weight: 700;
			border-bottom: 2px solid #dcc482;
		}

		.poemAuther {
			font-size: .8em
		}

		.poemImg {
			width: 100%;
			margin-top: 80rpx;
			height: 640rpx;
			display: flex;
			// border: 1px solid #ccc;
			height: 700rpx;
			// align-items: center;
			justify-content: center;
			// transform: translate(-50%);
			.poemBox{
				.Box1{
					width: 640rpx;
					height: 640rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px solid #dcc482;
					border-radius: 50%;
				}
				.Box2{
					color:red;
				}
			}
		}

		.Img {
			width: 600rpx;
			height: 600rpx;
			border-radius: 50%;
		}
	}
	.slider {
		margin-top: 140rpx;

		.sSpan {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 0 30rpx;
			font-size: .4em;
			font-weight: 400;
		}
	}
	.footer{
		display: flex;
		justify-content: center;
		margin-top: 120rpx;
		.footImg{
			width: 120rpx;
			height: 80rpx;
			margin: 0 40rpx;
		}
	}
</style>